<!DOCTYPE html>
<html>
    <head>
        <title>AGM销售排行</title>
        <link rel="stylesheet" href="/static/weui.min.160320.css">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="/static/jquery.touchSwipe.min.js"></script>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .page, body{background-color: #fbf9fe}
            .page{position: absolute;width: 100%;height: 100%;}
            .page_title{color:#225fba}
            .hd{text-align:center}
            .bd{padding-bottom:30px;}
            .bd{max-width:1000px;margin:auto;}
            .weui_cell_hd img{height: 40px;} 
            table { width: 100%; border-collapse: collapse;}
            tr:nth-of-type(odd) {background: #eee;}
            th {background: #333;color: white;font-weight: bold;}
            td, th { padding: 6px; border: 1px solid #ccc; text-align: left;}
            .nav_right{position: absolute;right: 5px;width: 35px;top: 5px;}
            .weui_actionsheet_menu a .weui_actionsheet_cell{color:initial;border-top: 1px solid #d9d9d9;}      
        </style>
    </head>
    <body>
        <div id='wx_logo' style="display:none;"><img src="/static/images/wx_logo.jpg"/></div>
        <div id="dealerlist" class="page">
            <div class="hd">
                <h2 class="page_title">AGM经销商列表</h2>
                <img src="/static/images/icon_nav_cell.png" class="nav_right">
            </div>
            <div class="bd">
                <div class="weui_cells_title">点击查看排行分类</div>
                <div class="weui_cells weui_cells_access">
                    {% for dealercode in  dealerconfig['dealercodes'] if dealercode in rankdata %}
                    <a class="weui_cell dealerbtn" href="javascript:;" dealercode="{{dealercode}}">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>{{ dealerconfig['dealers'][dealercode]['name'] }}</p>
                        </div>
                        <div class="weui_cell_ft">
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div id="ranktype" class="page" style="display:none">
            <div class="hd">
                <h2 class="page_title">测试经销商-排行分类</h2> 
            </div>            
            <div class="bd">
                <div class="weui_cells_title">点击列表查看相应排行</div>
                <div class="weui_cells weui_cells_access">
                    <a class="weui_cell" href="javascript:; " ranktype="today">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>今日排行</p>
                        </div>
                        <div class="weui_cell_ft">
                        </div>
                    </a>                    
                    <a class="weui_cell" href="javascript:;" ranktype="week">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>本周排行</p>
                        </div>
                        <div class="weui_cell_ft">
                        </div>
                    </a>                    
                    <a class="weui_cell" href="javascript:;" ranktype="month">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>本月排行</p>
                        </div>
                        <div class="weui_cell_ft">
                        </div>
                    </a>
                    <a class="weui_cell" href="javascript:;" ranktype="yesterday">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>昨日排行</p>
                        </div>
                        <div class="weui_cell_ft">
                        </div>
                    </a>
                    <a class="weui_cell" href="javascript:;" ranktype="lastweek">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>上周排行</p>
                        </div>
                        <div class="weui_cell_ft">
                        </div>
                    </a>
                    <a class="weui_cell" href="javascript:;" ranktype="lastmonth">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>上月排行</p>
                        </div>
                        <div class="weui_cell_ft">
                        </div>
                    </a>                    
                </div>
                <div style="padding: 15px 15px;"><a href="javascript:;" class="weui_btn weui_btn_plain_primary" backto="dealerlist">返回上一层</a></div>
            </div>
        </div>
        <div id="rank" class="page" style="display:none">
            <div class="hd">
                <h2 class="page_title">测试经销商-今日排行</h2> 
            </div>
            <div class="bd">
            <div class="weui_tab">
                <div class="weui_navbar">
                    <div class="weui_navbar_item weui_bar_item_on" id="sellranknav">
                        销售排行
                    </div>
                    <div class="weui_navbar_item" id="shopranknav">
                        门店排行
                    </div>
                </div> 
                <div class="weui_tab_bd">
                    <div class="weui_cells_title">点击查看详细内容</div>
                    <div class="weui_cells weui_cells_access">
                        <a class="weui_cell rankitem" href="javascript:;" detailto="sellid">
                            <div class="weui_cell_hd"><img src="/static/images/getheadimg.png"></div>
                            <div class="weui_cell_bd weui_cell_primary">
                                <p>测试销售</p>
                            </div>
                            <div class="weui_cell_ft">销售数量:<span class="value">10</span></div>
                        </a>                   
                    </div>                    
                    <div style="padding: 15px 15px;"><a href="javascript:;" class="weui_btn weui_btn_plain_primary" backto="ranktype">返回上一层</a></div>         
                </div>
            </div>
            </div>
        </div>      
        <div id="selldetail" class="page" style="display:none">
            <div class="hd">
                <h2 class="page_title">销售详情</h2> 
            </div>
            <div class="bd">
                <div class="weui_cells_title">微信信息</div>
                <div class="weui_cells weui_cells_access">
                    <a class="weui_cell" href="sellerinfo?uid=123456">
                        <div class="weui_cell_hd"><img src="/static/images/getheadimg.png"></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>测试销售</p>
                        </div>
                        <div class="weui_cell_ft">微信ID：测试ID</div>
                    </a>
                </div>
                <div class="weui_cells_title">销售列表</div>
                <table>
                    <thead>
                        <tr><th>销售时间</th><th>销售产品</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>2016-01-01 00:00</td><td>TR-01</td></tr>
                    </tbody>
                </table>
                <div style="padding: 15px 15px;"><a href="javascript:;" class="weui_btn weui_btn_plain_primary" backto="rank">返回上一层</a></div>            
            </div>
        </div> 
        <div id="shopdetail" class="page" style="display:none">
            <div class="hd">
                <h2 class="page_title">门店销售详情</h2> 
            </div>
            <div class="bd">
                <div class="weui_cells_title">销售列表</div>
                <table>
                    <thead>
                        <tr><th>销售时间</th><th>销售人员</th><th>销售产品</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>2016-01-01 00:00</td><td>imfun</td><td>TR-01</td></tr>
                    </tbody>
                </table>
                <div style="padding: 15px 15px;"><a href="javascript:;" class="weui_btn weui_btn_plain_primary" backto="rank">返回上一层</a></div>            
            </div>
        </div>         
        <div class="weui_dialog_confirm" id="dialog1" style="display:none">
            <div class="weui_mask"></div>
            <div class="weui_dialog">
                <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
                <div class="weui_dialog_bd">自定义弹窗内容，居左对齐显示，告知需要确认的信息等</div>
                <div class="weui_dialog_ft">
                    <a class="weui_btn_dialog default">取消</a>
                    <a class="weui_btn_dialog primary">确定</a>
                </div>
            </div>
        </div>        
        <div class="weui_dialog_alert" id="dialog2" style="display:none">
            <div class="weui_mask"></div>
            <div class="weui_dialog">
                <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
                <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
                <div class="weui_dialog_ft">
                    <a class="weui_btn_dialog primary">确定</a>
                </div>
            </div>
        </div>
        <div id="actionSheet_wrap" style="display: none;">
            <div class="weui_mask_transition" id="mask" style="display: none;"></div>
            <div class="weui_actionsheet" id="weui_actionsheet">
                <div class="weui_actionsheet_menu">
                    <a href="sellerrank"><div class="weui_actionsheet_cell">销售排行</div></a>
                    <a href="sellerlist"><div class="weui_actionsheet_cell">销售列表</div></a>
                    {% if not session.get('role') %}<a href="dealersetting"><div class="weui_actionsheet_cell">经销商设置</div></a>{% endif %}
                </div>
                <div class="weui_actionsheet_action">
                    <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
                </div>
            </div>
        </div>      
    </body>
    <script>
        dialog2 = function(title, content, sucfunc){
            var self = $('#dialog2')
            self.find('.weui_dialog_title').text(title)
            self.find('.weui_dialog_bd').html(content)
            var clickfunc = sucfunc?sucfunc:function(){self.hide();}
            self.find('.weui_btn_dialog.primary').click(clickfunc)
            self.show()
        }
        var rankdata = {{rankdata|safe}}
        var ranktypetext = {'today': '今日排行', 'week': '本周排行', 'month': '本月排行',
            'yesterday': '昨日排行', 'lastweek': '上周排行', 'lastmonth': '上月排行'}
        var rankitemdefault = $('#rank .rankitem')
        var dealercode, dealername, ranktype 
        $(document).on('click', 'a[dealercode]', function(){
            var self = $(this)
            dealercode = self.attr('dealercode')
            dealername = rankdata[dealercode].name
            $('#ranktype .page_title').text(dealername + '-排行分类')            
            showpage(self, 'ranktype')            
        })
        $(document).on('click', 'a[ranktype]', function(){
            var self = $(this)
            ranktype = self.attr('ranktype')
            $('#sellranknav').trigger('click')
            showrank()
            $('#rank .page_title').text(dealername + '-' + ranktypetext[ranktype])            
            showpage(self, 'rank')
        })
        showrank = function(shop){
            var sellers = shop?rankdata[dealercode].sellshops:rankdata[dealercode].sellers
            var sellerkeys = getsorted(sellers, ranktype)            
            setrank(sellers, sellerkeys, shop)            
        }
        $(document).on('click', 'a[backto]', function(){
            window.history.back();
            /*
            var self = $(this)
            showpage(self, self.attr('backto'))*/
        })
        $(document).on('click', 'a[detailto],a[detailshopto]', function(){
            var self = $(this)
            if(self.attr('detailshopto')){
                var sellid = self.attr('detailshopto')
                var seller = rankdata[dealercode].sellshops[sellid]
                setdetail(seller, true)
                showpage(self, 'shopdetail')
            }else{
                var sellid = self.attr('detailto')
                var seller = rankdata[dealercode].sellers[sellid]
                var weui_cell = $('#selldetail a.weui_cell')
                weui_cell.attr('href', 'sellerinfo?uid='+sellid)
                weui_cell.find('img').attr('src', seller.imgurl)
                weui_cell.find('.weui_cell_ft').text('微信ID：'+seller.wxid)
                weui_cell.find('.weui_cell_primary p').text(seller.nickname)
                setdetail(seller)           
                showpage(self, 'selldetail')
            }
        })
        $(document).on('click', '.weui_navbar_item', function(){
            var self = $(this)
            if(self.hasClass('weui_bar_item_on')){return}
            self.parent().find('.weui_bar_item_on').removeClass('weui_bar_item_on')
            self.addClass('weui_bar_item_on')
            if(self.attr('id') == 'shopranknav'){
                showrank(true)
            }else{
                showrank()
            }
        })
        setdetail = function(seller, shop){            
            if(shop){
                var tbody = $('#shopdetail tbody')
                tbody.empty()
                for(var i in seller.record){
                    tbody.append('<tr><td>'+seller.record[i][0]+'</td><td>'+seller.record[i][1]+'</td><td>'+seller.record[i][2]+'</td></tr>')
                }
            }else{
                var tbody = $('#selldetail tbody')
                tbody.empty()
                for(var i in seller.record){
                    tbody.append('<tr><td>'+seller.record[i][0]+'</td><td>'+seller.record[i][1]+'</td></tr>')
                }
            }
        }
        getsorted = function(sellers, ranktype){
            var ret = [], i
            for(i in sellers){
                ret.push([i, sellers[i][ranktype]])
            }
            ret.sort(function(a, b){return a[1]<b[1]?1:-1})
            //console.info(ret)
            return ret
        }
        setrank = function(sellers, sellerkeys, shop){
            rank = $('#rank .weui_cells_access')
            rank.empty()
            //console.info(sellerkeys, sellers)
            for(var i in sellerkeys){
                var rankitem = rankitemdefault.clone()
                var sellerid = sellerkeys[i][0], value=sellerkeys[i][1]
                var seller = sellers[sellerid]          
                if(shop){
                    rankitem.removeAttr('detailto')
                    rankitem.attr('detailshopto', sellerid)
                    rankitem.find('.weui_cell_hd').remove()
                    rankitem.find('.weui_cell_primary p').text(seller.shopname)    
                }else{
                    rankitem.attr('detailto', sellerid)
                    rankitem.find('img').attr('src', seller.imgurl)
                    rankitem.find('.weui_cell_primary p').text(seller.nickname)
                }
                rankitem.find('.value').text(value)
                rank.append(rankitem)
            } 
        }
        showpage = function(self, pageid){
            location.hash = pageid
            /*
            self.parents('.page').fadeOut(function(){
                $('#'+pageid).show()
            })*/
        }
        if(location.hash){
            location.hash = ''
        }
        window.onhashchange = function(e){
            var hash = location.hash?location.hash:'#dealerlist'
            console.info(hash)
            $('.page:visible').fadeOut(function(){
                $(hash).show()
            })
       
        }
        $('.nav_right').click(function(){
            $('#actionSheet_wrap').show()
            var mask = $('#mask');
            var weuiActionsheet = $('#weui_actionsheet');
            weuiActionsheet.addClass('weui_actionsheet_toggle');
            mask.show().addClass('weui_fade_toggle').one('click', function () {
                hideActionSheet(weuiActionsheet, mask);
            });
            $('#actionsheet_cancel').one('click', function () {
                hideActionSheet(weuiActionsheet, mask);
            });
            weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

            function hideActionSheet(weuiActionsheet, mask) {
                weuiActionsheet.removeClass('weui_actionsheet_toggle');
                mask.removeClass('weui_fade_toggle');
                weuiActionsheet.on('transitionend', function () {
                    mask.hide();
                    $('#actionSheet_wrap').css('display', 'none')
                }).on('webkitTransitionEnd', function () {
                    mask.hide();
                    $('#actionSheet_wrap').css('display', 'none')
                })
                //setTimeout("$('#actionSheet_wrap').css('display', 'none')", 300)
                
            }
        })
        $('.page').swipe({swipeRight: function(event, direction, distance, duration, fingerCount, fingerData){
            var self = $(this)
            //console.info(event, direction, distance, duration, fingerCount, fingerData)
            //if(direction=='right'){
                event.preventDefault();
                self.find('a[backto]').trigger('click')
            //}
            return true
            }, swipeLeft: function(){history.forward()}, excludedElements: "label, button, input, select, textarea, .noSwipe", allowPageScroll:"auto"
        }); 
        
    </script>
<html>